<template>
  <div class="nav_top_box">
    <div class="box_nav">
      <!-- 缩放导航栏 -->

      <i class="el-icon-s-fold"></i>

      <!-- logo -->

      <el-image style="width: 80px" :src="logo"></el-image>

      <!-- 面包屑 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item
          v-for="item in levelList"
          :key="item.path"
          :to="item.path"
          >{{ item.name }}</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>

    <!-- 用户注销 -->

    <div class="usercontrol_box">
      <el-link
        class="el-icon-s-home"
        href="https://element.eleme.io"
        target="_blank"
        >我的店铺首页</el-link
      >

      <el-dropdown>
        <span class="el-dropdown-link">
          <el-avatar :src="userimg"></el-avatar>
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>修改密码</el-dropdown-item>
          <el-dropdown-item>退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import logo from "../assets/img/logo.png";
export default {
  name: "Navbar",
  data() {
    return {
      logo,
      // 路由数组
      levelList: [],
      userimg: require("../assets/img/touxiang.jpg"),
    };
  },

  components: {},

  methods: {
    getBreadcrumb() {
      let matched = this.$route.matched.filter((item) => item.name);
      const first = matched[0];
      if (
        first &&
        first.name.trim().toLocaleLowerCase() !== "/".toLocaleLowerCase()
      ) {
        matched = [{ path: "/", name: "首页" }].concat(matched);
      }
      this.levelList = matched;
    },
  },
  watch: {
    $route() {
      this.getBreadcrumb();
    },
  },
};
</script>

<style lang="scss" scoped>
.nav_top_box {
  box-sizing:border-box;
  width: 100%;
  max-height: 100px !important;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #cccccc;
  .box_nav {
    min-width: 300px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-icon-s-fold {
      font-size: 30px;
    }
  }
  .usercontrol_box {
    width: 180px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
